import React, { useState, useEffect } from 'react';
import { Layout, Menu, Button, message } from 'antd';
import { 
  MenuOutlined, 
  HomeOutlined, 
  AppstoreOutlined, 
  ShoppingOutlined,
  LogoutOutlined,
  LockOutlined
} from '@ant-design/icons';
import HomepageManagement from '../components/admin/HomepageManagement';
import CategoryManagement from '../components/admin/CategoryManagement';
import ProductManagement from '../components/admin/ProductManagement';
import ChangePasswordModal from '../components/ChangePasswordModal';
import './admin.css';

const { Header, Sider, Content } = Layout;

const AdminPage: React.FC = () => {
  const [selectedKey, setSelectedKey] = useState('');
  const [collapsed, setCollapsed] = useState(false);
  const [changePasswordVisible, setChangePasswordVisible] = useState(false);

  useEffect(() => {
    // 检查登录状态
    const token = localStorage.getItem('token');
    if (!token) {
      message.error('请先登录');
      window.location.href = '/login';
      return;
    }
  }, []);

  const handleLogout = () => {
    localStorage.removeItem('token');
    message.success('已退出登录');
    window.location.href = '/login';
  };

  const handleChangePassword = () => {
    setChangePasswordVisible(true);
  };

  const handleChangePasswordSuccess = () => {
    setChangePasswordVisible(false);
    message.success('密码修改成功，即将跳转到首页');
    setTimeout(() => {
      window.location.href = '/';
    }, 1500);
  };

  const menuItems = [
    {
      key: 'homepage',
      icon: <HomeOutlined />,
      label: '首屏管理',
    },
    {
      key: 'categories',
      icon: <AppstoreOutlined />,
      label: '分类管理',
    },
    {
      key: 'products',
      icon: <ShoppingOutlined />,
      label: '商品管理',
    },
  ];

  const renderContent = () => {
    switch (selectedKey) {
      case '':
        return <HomepageManagement />;
      case 'categories':
        return <CategoryManagement />;
      case 'products':
        return <ProductManagement />;
      default:'homepage'
        return <HomepageManagement />;
    }
  };

  return (
    <Layout className="admin-layout">
      <Sider 
        trigger={null} 
        collapsible 
        collapsed={collapsed}
        className="admin-sider"
      >
        <div className="admin-logo">
          <h2>管理后台</h2>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[selectedKey]}
          items={menuItems}
          onClick={({ key }) => setSelectedKey(key)}
        />
      </Sider>
      
      <Layout>
        <Header className="admin-header">
          <div className="header-content">
            <Button
              type="text"
              icon={collapsed ? <MenuOutlined /> : <MenuOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              className="trigger-btn"
            />
            <div className="header-right">
              <Button
                type="text"
                icon={<LockOutlined />}
                onClick={handleChangePassword}
                className="change-password-btn"
              >
                修改密码
              </Button>
              <Button
                type="text"
                icon={<LogoutOutlined />}
                onClick={handleLogout}
                className="logout-btn"
              >
                退出登录
              </Button>
            </div>
          </div>
        </Header>
        
        <Content className="admin-content">
          {renderContent()}
        </Content>
      </Layout>

      <ChangePasswordModal
        visible={changePasswordVisible}
        onCancel={() => setChangePasswordVisible(false)}
        onSuccess={handleChangePasswordSuccess}
      />
    </Layout>
  );
};

export default AdminPage; 